<template>
	<view>
		<u-navbar back-icon-color="#FFFFFF" :title="navTitle" :background="background" title-color="#FFFFFF"></u-navbar>
		<view class="content">
			<view class="total u-p-t-30 u-p-b-30">
				<u-row gutter="16" justify="space-between">
					<u-col span="4">
						<view class="u-text-center u-p-b-20 u-font-36">总客户数</view>
						<view class="u-text-center u-font-32">{{userNum}}</view>
					</u-col>
					<u-col span="4">
						<view class="u-text-center u-p-b-20 u-font-36">总订单数</view>
						<view class="u-text-center u-font-32">{{totalElements}}</view>
					</u-col>
					<u-col span="4">
						<view class="u-text-center u-p-b-20 u-font-36">总业绩</view>
						<view class="u-text-center u-font-32">{{totalPrice}}</view>
					</u-col>
				</u-row>
			</view>
			<u-gap height="24" bg-color="#f3f4f6"></u-gap>
			<view class="order-list">
				<view v-if="orderList.length > 0">
					<block v-for="(item, index) in orderList" :key="index">
						<view class="order-item">
							<view class="order-item-sn">订单号:{{ item.orderSn }}</view>
							<view class="order-item-sn">时间:{{ item.createTime }}</view>
							<view class="order-item-text">联系人:{{ item.receiver }}</view>
							<view class="order-item-text">手机号:{{ item.phoneNum }}</view>
							<view class="order-item-text">
								门店地址:
								<view>{{ item.address }}</view>
							</view>
							<view class="order-item-text">
								商品:
								<view>{{ item.goods }}</view>
							</view>
							<view class="order-item-btn">
								<u-button class="u-m-l-16" type="success" size="medium" plain @click="tell(item.phoneNum)">一键拨号</u-button>
								<u-button class="u-m-l-16" type="primary" size="medium" plain @click="navigation(item.latitude, item.longitude)">导航到门店</u-button>
							</view>
						</view>
					</block>
				</view>
				<u-empty v-else text="没有相关信息" mode="data"></u-empty>
				<u-loadmore v-show="!isEmpty" color="$u-type-info-light" bg-color="$u-bg-color" :status="status" @loadmore="getData"></u-loadmore>
			</view>
			<view>
				<!-- <mask :maskShow="maskShow"></mask> -->
				<u-mask :show="maskShow" :custom-style="{ background: 'rgba(255, 255, 255, 0.1)' }">
					<view class="warp"><u-loading mode="flower" size="40"></u-loading></view>
				</u-mask>
			</view>
			<u-gap height="24" bg-color="#f3f4f6"></u-gap>
			<view><u-toast ref="uToast" /></view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			background: {
				backgroundImage: 'linear-gradient(90deg, rgb(0,164,133), rgb(51,241,205))'
			},
			navTitle: '我的业绩',
			userInfo: {},
			//
			page: 0,
			size: 20,
			sort: 'id,desc',
			date: 0,
			orderList: [],
			isEmpty: true,
			status: 'loadmore', //加载更多
			maskShow: false,
			//
			userNum:0,
			totalPrice:0,
			totalPayPrice:0,
			totalElements:0,
		};
	},
	onLoad(option) {
		try {
			const token = uni.getStorageSync('token');
			if (token) {
				console.log(option);
				this.userInfo = uni.getStorageSync('userInfo');
				if (!this.userInfo) {
					//#ifdef APP-PLUS
					uni.reLaunch({
						url: '/pages/login/index'
					});
					//#endif
					//#ifdef MP-WEIXIN
					uni.reLaunch({
						url: '/pages/login/xcxLogin'
					});
					//#endif
				}
				if(option.date){
					console.log("option.date")
					console.log(option.date)
					this.date = option.date;
					if(option.date == 1){
						console.log("今日业绩")
						this.navTitle = "今日业绩";
					}
					if(option.date == 2){
						console.log("今月业绩")
						this.navTitle = "今月业绩";
					}
					this.getData();
				}
			} else {
				//#ifdef APP-PLUS
				uni.reLaunch({
					url: '/pages/login/index'
				});
				//#endif
				//#ifdef MP-WEIXIN
				uni.reLaunch({
					url: '/pages/login/xcxLogin'
				});
				//#endif
			}
		} catch (e) {
			// error
		}
	},
	onReachBottom() {
		this.page++;
		let formData = {
			page: this.page,
			size: this.size,
			sort: this.sort,
			date: this.date
		};
		this.getMoreOrderList(formData);
	},
	onShow() {},
	methods: {
		getData() {
			let _t = this;
			_t.status = 'loading';
			_t.maskShow = true;
			let formData = {
				page: _t.page,
				size: _t.size,
				sort: _t.sort,
				date: this.date
			};
			_t.getOrderList(formData);
		},
		getOrderList(formData) {
			let _t = this;
			_t.$u.api.getYwOrder(formData).then(res => {
				console.log('getOrderList');
				console.log(res);
				_t.maskShow = false;
				if(res.statusCode == 200){
					_t.orderList = res.data.content;
					console.log(res.data.content.length);
					_t.userNum=res.data.userNum;
					_t.totalPrice=res.data.totalPrice;
					_t.totalPayPrice=res.data.totalPayPrice;
					_t.totalElements=res.data.totalElements;
					if (res.data.content.length == 0) {
						_t.isEmpty = true;
						_t.status = 'nomore';
					} else if (res.data.number == res.data.totalPages || res.data.totalPages == 1) {
						_t.status = 'nomore';
					} else {
						_t.status = 'loadmore';
					}
				}else{
					_t.isEmpty = true;
					_t.status = 'nomore';
					console.log(_t.isEmpty );
					setTimeout(() => {
						uni.navigateBack({
						    delta: 1
						});
					}, 3000)
				}
			});
		},
		getMoreOrderList(formData) {
			let _t = this;
			console.log("page");
			console.log(_t.page);
			_t.$u.api.getYwOrder(formData).then(res => {
				console.log('getMoreOrderList');
				console.log(res);
				if(res.statusCode == 200){
					if (res.data.number == res.data.totalPages) {
						_t.status = 'nomore';
					} else {
						_t.orderList = _t.orderList.concat(res.data.content);
						_t.status = 'loadmore';
					}
				}else{
					_t.status = 'nomore';
				}
			});
		},
		tell(phoneNum) {
			if (phoneNum) {
				uni.makePhoneCall({
					phoneNumber: phoneNum //仅为示例
				});
			} else {
				this.$refs.uToast.show({
					title: '提示：该用户暂未填写手机号',
					type: 'error'
				});
			}
		},
		navigation(latitude, longitude) {
			if (latitude) {
				console.log(latitude);
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					success: function() {
						console.log('success');
					}
				});
			} else {
				this.$refs.uToast.show({
					title: '提示：该用户地址未填写完整',
					type: 'error'
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $u-bg-color;
}
.content {
	.total {
		background-color: #c8c9cc;
		position: fixed;
		width: 100%;
		z-index: 9999;
	}
	.order-list {
		padding-top: 170rpx;
		.order-item {
			background-color: #ffffff;
			margin-bottom: 24rpx;
			padding: 24rpx 24rpx;
			font-size: 24rpx;
			.order-item-btn {
				margin-top: 8rpx;
				text-align: center;
			}
			.order-item-sn {
				font-size: 28rpx;
				font-weight: bold;
				padding-bottom: 16rpx;
			}
			.order-item-text {
				font-size: 28rpx;
				padding-bottom: 16rpx;
			}
		}
	}
}
</style>
